// 首先针对button定义一系列css变量
.chen-button-var {
    --chen-button-font-weight: var(--chen-font-weight-base);
    --chen-button-border-color: var(--chen-border-color);
    --chen-button-bg-color: var(--chen-fill-color-blank);
    --chen-button-text-color: var(--chen-text-color-regular);
    --chen-button-disabled-text-color: var(--chen-disabled-text-color);
    --chen-button-disabled-bg-color: var(--chen-fill-color-blank);
    --chen-button-disabled-border-color: var(--chen-border-color-light);
    --chen-button-hover-text-color: var(--chen-primary);
    --chen-button-hover-bg-color: var(--chen-primary-6);
    --chen-button-hover-border-color: var(--chen-primary-3);
    --chen-button-active-text-color: var(--chen-button-hover-text-color);
    --chen-button-active-border-color: var(--chen-primary);
    --chen-button-active-bg-color: var(--chen-button-hover-bg-color);
    --chen-button-outline-color: var(--chen-primary-2);
    --chen-button-active-color: var(--chen-text-color-primary)
}


// 书写基本样式
.chen-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    height: 40px;
    border-style: solid;
    border-width: var(--chen-border-width);
    background-color: var(--chen-button-bg-color);
    border-color: var(--chen-button-border-color);
    color: var(--chen-button-text-color);
    appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.2s;
    font-weight: var(--chen-button-font-weight);
    user-select: none;
    vertical-align: middle;
    padding: 8px 25px;
    font-size: var(--chen-font-size-base);
    border-radius: var(--chen-border-radius-base);

    &:hover {
        color: var(--chen-button-hover-text-color);
        border-color: var(--chen-button-hover-border-color);
        background-color: var(--chen-button-hover-bg-color);
        outline: none;
    }

    &:active {
        color: var(--chen-button-active-text-color);
        border-width: 1.5px;
        transform: scale(0.9);
        border-color: var(--chen-button-active-border-color);
        background-color: var(--chen-button-active-bg-color);
        outline: none;
    }

    &.rounded {
        border-radius: var(--chen-border-radius-round)
    }

    &.circle {
        border-radius: var(--chen-border-radius-circle);
        width: 40px;
        height: 40px;
        padding: 0px;
    }

    &.disabled,
    &.disabled:hover,
    &.disabled:focus,
    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus {
        color: var(--chen-button-disabled-text-color);
        cursor: not-allowed;
        background-image: none;
        background-color: var(--chen-button-disabled-bg-color);
        border-color: var(--chen-button-disabled-border-color);
        transform: scale(1);
    }

    &.disabled:active {
        animation: shake 0.5s infinite
    }

    // 不同尺寸样式
    &.small {
        width: 30px;
        height: 30px;
        padding: 12px 40px;
        font-size: 12px;
    }

    &.large {
        width: 120px;
        height: 50px;
        padding: 12px 70px;
        font-size: 16px;
    }
}

// 循环设置type属性变化
@typeArr: primary, success, info, warning, danger;

each(@typeArr, {
        .chen-button-@{value} {
            --chen-button-border-color: ~"var(--chen-@{value})";
            --chen-button-bg-color: ~"var(--chen-@{value})";
            --chen-button-text-color: var(--chen-color-white);
            --chen-button-disabled-text-color: var(--chen-color-white);
            --chen-button-disabled-bg-color: ~"var(--chen-@{value}-5)";
            --chen-button-disabled-border-color: ~"var(--chen-@{value}-5)";
            --chen-button-hover-text-color: ~"var(--chen-color-white)";
            --chen-button-hover-bg-color: ~"var(--chen-@{value}-3)";
            --chen-button-hover-border-color: ~"var(--chen-@{value}-2)";
            --chen-button-active-text-color: var(--chen-button-hover-text-color);
            --chen-button-active-border-color: ~"var(--chen-@{value})";
            --chen-button-active-bg-color: var(--chen-button-hover-bg-color);
            --chen-button-outline-color: ~"var(--chen-@{value}-2)";
            --chen-button-active-color: ~"var(--chen-text-color-@{value})"

        }

        .chen-button-@{value}.plain {
            --chen-button-text-color:~"var(--chen-@{value})";
            --chen-button-bg-color: ~"var(--chen-@{value}-6)";
            --chen-button-border-color: ~"var(--chen-@{value}-2)";
            --chen-button-hover-text-color: var(--chen-color-white);
            --chen-button-hover-bg-color: ~"var(--chen-@{value})";
            --chen-button-hover-border-color: ~"var(--chen-@{value})";
            --chen-button-active-text-color: var(--chen-color-white);
        }
    }

) // 按钮禁用点击晃动

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px);
    }

    20% {
        transform: translateX(5px);
    }

    30% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }

    70% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

    90% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}